.approval-section-title {
    margin: 0;
    height: 34px;
    line-height: 34px;
}

.seal-pic {
    position: absolute;
    right: 0;
    top: 120px;
    user-select: none;
    opacity: .5;
}

/* 审批通用样式，调整表单控件之间的间距及表格样式 */
.layui-form-item .layui-form-label {
    width: 7em;
}

.layui-form-item .layui-input-block {
    margin-left: 7em;
}

.layui-form-item {
    margin-bottom: 30px;
}

.products-container {
    margin-top: 40px;
}

.reason-textarea {
    line-height: normal !important;
}

.products-container hr {
    margin-top: 15px;
}

h3 {
    margin: 40px 0 20px 0;
}

input[disabled] {
    cursor: not-allowed !important;
}

.table td {
    vertical-align: middle;
    height: 47px;
}

.table .layui-input,
.table .layui-textarea,
.table .layui-select {
    border: solid 1px #fff;
    padding: 0;
    height: 30px;
    line-height: 30px;
}

.table .layui-input:hover,
.table .layui-textarea:hover {
    border: solid 1px #fff !important;
}

.table .layui-input:focus,
.table .layui-textarea:focus {
    border: solid 1px #fff !important;
}


/* 弹层选择用户的样式及鼠标移入动效 */
.user-box {
    width: 80px;
    display: inline-block;
    margin: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.user-box img {
    transition: all .3s;
}

.user-box:hover img {
    transform: scale(1.15);
}

.user-box .user-posts,
.user-item .user-posts,
.user-item-arrow .user-posts {
    display: block;
    width: 100%;
    line-height: 1.4em;
    background: #6e7072;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.user-box .user-name {
    margin: 5px 0 2px;
}


/* 添加人员的按钮样式，在有设定规则的情况下该按钮时不可见的 */
.add-user-btn {
    user-select: none;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: top;
    background: #f6f6f6;
    color: #888;
    line-height: 50px;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    margin-bottom: 40px;
}

.add-user-btn:hover {
    opacity: .8;
}


/* 没有设定审批规则时的样式 start */
.no-rule-box .user-box,
.no-rule-box .user-item-arrow,
.no-rule-box .user-item {
    display: inline-block;
    width: 80px;
}

.no-rule-box .user-item-arrow,
.no-rule-box .user-item {
    position: relative;
    margin: 0 60px 40px 0;
}

.no-rule-box .user-item-arrow:after {
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    right: -55px;
    top: 0;
    background: url("/Public/home/img/icons/right-jiantou.svg") center center no-repeat;
}

.no-rule-box .user-item-arrow img,
.no-rule-box .user-item img {
    cursor: pointer;
}

.no-rule-box .user-item-arrow .user-avatar,
.no-rule-box .user-item .user-avatar {
    position: relative;
    overflow: hidden;
}

.no-rule-box .user-item-arrow .user-avatar:hover:after,
.no-rule-box .user-item .user-avatar:hover:after {
    display: block;
}

.no-rule-box .user-item-arrow .user-avatar:after,
.no-rule-box .user-item .user-avatar:after {
    content: '';
    display: none;
    position: absolute;
    left: 15px;
    top: 0;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(0, 0, 0, .75) url(/Public/home/img/icons/remove_line.svg) center center no-repeat;
    color: #fff;
    width: 50px;
    height: 50px;
}

.no-rule-box .user-item .user-name-unselected {
    color: #d9534f;
}

.no-rule-box .user-item .user-name {
    margin: 5px 0 2px;
}

/* 没有设定审批规则时的样式 end */


/* 有设定审批规则时的样式 start */
.rule-box .user-box,
.rule-box .user-item-arrow,
.rule-box .user-item {
    display: inline-block;
    width: 80px;
}

.rule-box .user-item-arrow,
.rule-box .user-item {
    position: relative;
    margin: 0 60px 40px 0;
}

.rule-box .user-item-arrow:after {
    content: '';
    display: block !important;
    width: 60px;
    height: 50px;
    position: absolute;
    right: -60px;
    top: 0;
    background: url("/Public/home/img/icons/right-jiantou.svg") center center no-repeat;
}

.rule-box .user-item-arrow:last-child:after {
    content: '';
    background: none;
}

.rule-box .user-item-arrow img,
.rule-box .user-item img {
    cursor: pointer;
}

.rule-box .user-item-arrow .user-avatar,
.rule-box .user-item .user-avatar {
    position: relative;
    overflow: hidden;
    user-select: none;
}

.rule-box .user-item-arrow .user-avatar:hover:after,
.rule-box .user-item .user-avatar:hover:after {
    display: block;
}

.rule-box .user-item-arrow .user-avatar:after,
.rule-box .user-item .user-avatar:after {
    content: '';
    display: none;
    position: absolute;
    left: 15px;
    top: 0;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(0, 0, 0, .75) url(/Public/home/img/user_white.png) center center no-repeat;
    color: #fff;
    width: 50px;
    height: 50px;
}

.rule-box .user-item-arrow .user-name-unselected {
    color: #d9534f;
}

.rule-box .user-item-arrow .user-name,
.no-rule-box .user-item-arrow .user-name {
    margin: 5px 0 2px;
}

/* 有设定审批规则时的样式 end */

